<template>
  <div class="users-view">
    <div class="page-header">
      <h1>用户管理</h1>
      <p>查看小程序用户，支持搜索与分页</p>
    </div>

    <!-- 筛选区域 -->
    <el-card class="filter-card" shadow="never">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input
            v-model="searchForm.search"
            placeholder="请输入昵称或手机号搜索"
            clearable
            style="width: 280px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 列表区域 -->
    <el-card class="content-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>用户列表 ({{ pagination.total }})</span>
        </div>
      </template>

      <el-table :data="userList" v-loading="loading" style="width: 100%">
        <el-table-column label="头像" width="80" align="center">
          <template #default="{ row }">
            <el-avatar :size="36" :src="row.avatar_url" />
          </template>
        </el-table-column>

        <el-table-column prop="nickname" label="昵称" min-width="160" />
        <el-table-column prop="phone_number" label="手机号" width="140" align="center" />
        <el-table-column prop="last_login_at" label="最近登录" width="180" align="center">
          <template #default="{ row }">{{ formatDate(row.last_login_at) }}</template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="180" align="center">
          <template #default="{ row }">{{ formatDate(row.created_at) }}</template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="80" align="center" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import request from '@/utils/request'

interface UserItem {
  id: number
  nickname: string
  avatar_url: string
  phone_number: string
  last_login_at?: string
  created_at?: string
}

const loading = ref(false)
const userList = ref<UserItem[]>([])

const searchForm = reactive({
  search: ''
})

const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})

const formatDate = (val?: string) => {
  if (!val) return '-'
  try { return new Date(val).toLocaleString('zh-CN') } catch { return val }
}

const loadUsers = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      pageSize: pagination.pageSize,
      search: searchForm.search
    }
    const response: any = await request.get('/users', { params })
    // res.paginate 返回：{ success, data: [], pagination: { total, ... } }
    userList.value = response.data || []
    pagination.total = response.pagination?.total || 0
  } catch (err) {
    console.error('加载用户失败:', err)
    ElMessage.error('加载用户失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.page = 1
  loadUsers()
}

const handleReset = () => {
  searchForm.search = ''
  pagination.page = 1
  loadUsers()
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.page = 1
  loadUsers()
}

const handleCurrentChange = (page: number) => {
  pagination.page = page
  loadUsers()
}

onMounted(() => {
  loadUsers()
})
</script>

<style scoped>
.users-view { max-width: 1200px; margin: 0 auto; }
.page-header { margin-bottom: 16px; }
.filter-card { margin-bottom: 16px; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
.pagination { margin-top: 16px; display: flex; justify-content: flex-end; }
</style>
